<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IM</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link rel="stylesheet" href="http://mat1.gtimg.com/libs/animate/3.5.0/animate.min.css">
<style>
    *{margin:0;box-sizing:border-box;}
    #IM{width:640px;max-width:640px;margin:0 auto;background:#000;}
    #msgList{min-height:300px;overflow-y:auto;padding:0 20px;}
    #talk{height:32px;line-height:32px;background:#666;color:#fff}
    #msg{display: inline-block;width:80%;background:none;outline:none;color:#fff;border:none;padding:0 20px}
    #send{display: inline-block;width:20%;text-align: center;background:#999;text-align: center;color:#fff;}
    .join{font-size:12px;line-height:3;color:#999;text-align: center;}
    .leave{font-size:12px;line-height:3;color:#f99;text-align: center;}
    .mytalk,.talk{font-size:14px;color:#666;padding:5px 0;border-bottom:1px solid #333;}
    .mytalk{text-align:right;}
    .user{display: inline-block;}
    .talk .user {color:#f3f;}
    .talk .content{color:#fff;display: inline-block;padding: 2px 10px;border: 1px solid #18bfff;margin: 5px;border-radius: 3px;background:#03b0ff;}
    .mytalk .user {color:#f3f;}
    .mytalk .content{color:#fff;display: inline-block;padding: 2px 10px;border: 1px solid #c9542d;margin: 5px;border-radius: 3px;background:#f9542d;}
    
    
    .clear{clear:both;}
</style>
</head>
<body>
    <div id="IM">
        <div id="msgList">
        
        </div>
        <div id="talk">
            <input type="text" name="" id="msg"><span  id="send" style="cursor:pointer">发送</span>
        </div>
    </div>
    
    
    
</body>
<script>
var  SSID  = parseInt(Math.random()*100000000).toString();
var ws = new WebSocket("ws://127.0.0.1:8086?SSID="+SSID)
var wsStat = 0,wsTimer;
ws.onopen = function (evt) {
    wsStat = 1;
    console.log("Connection open ...");
};
ws.onclose = function (e) {
    wsStat = 0;
    console.log("Connection clsoe ...",e);
    console.log((+new Date))
    
};
ws.onmessage = function (e) {
    console.log(e)
    var data = JSON.parse(e.data);
    switch (data.type){
        case -2:  // 服务器回应
            break;
        case -1:  // 无
            break;
        case 0 :  // 消息
            var lineclass = 'talk';
            if(data.name == SSID) {
                 $("#msgList").append('<div class="mytalk fadeInUp animated"><div class="content">'+data.msg+'</div><div class="user">我</div><div class="clear"></div></div>')
            }else{
                 $("#msgList").append('<div class="talk fadeInUp animated"><div class="user">'+data.name+'</div><div class="content">'+data.msg+'</div><div class="clear"></div></div>')
            }
            
            break;
        case 1:   // 进入房间
            $("#msgList").append('<div class="join fadeInUp animated"><span class="other">系统提示：</span><span class="">'+data.msg+'</span></div>')
            break;
        case 2:  //离开房间
            $("#msgList").append('<div class="leave fadeInUp animated"><span class="other">系统提示：</span><span class="">'+data.msg+'</span></div>')
            break;
    }
};

$(function(){
    
    calcSize()
    $("#send").click(function(){
        if(msg.value == ''){
            alert('请输出聊天内容');
            return
        }
        ws.send(JSON.stringify({type:0,msg:$("#msg").val(),SSID:SSID}))
        msg.value = '';
    })

    wsTimer = setInterval(function(){
        if(wsStat){
            ws.send(JSON.stringify({type:-1,msg:1,SSID:SSID}))
        }else{
            clearInterval(wsTimer)
        }
    },4000)
    
})

window.onresize = calcSize
function calcSize(){
    var h = $(window).height(),w = $(window).width();
    var msgH = 32 
    $("#IM").css("height",h)
    $("#msgList").css("height",h-msgH)
    
    
}

</script>
</html>